<template>
	<view class="date-Select">
		<view class="date-value" @click="showSmake(true)" :style="{color:dateTime.length ==2 ?'#262626':'#ababab'}">
			{{dateTime.length == 2 ?  filterTimeShow(showInDataTime[0]) + " - " + filterTimeShow(showInDataTime[1]) : '如“今天 09:00 - 17:00”'}}
		</view>
		<view class="smake" @click="showSmake(false)" v-show="selectShow">
			<view class="smake-Info" :class="{active: selectShowInfo}" @click.stop="">
				<!-- 头部选择器 -->
				<view class="top-Select-List">
					<view class="item" :class="{active: selectTimeIndex == 0}" @click="selectChange(0)">
						<view class="label"> 开工时间 </view>
						<view class="value">
							{{filterTimeShow(showInDataTime[0])}}
						</view>
					</view>
					<view class="next-Icon">
					</view>
					<view class="item" :class="{active: selectTimeIndex == 1}" @click="selectChange(1)">
						<view class="label"> 收工时间 </view>
						<view class="value" :style="{color:waitcolor()}">
							{{filterTimeShow(showInDataTime[1])}}
						</view>
					</view>
				</view>
				<!-- 时间选择区域 -->
				<view class="picker-List">
					<picker-view :value="dTimeValue" @pickend='pickend' @change="dBindChange" class="picker-view"
						@pickstart='pickstart' :indicator-style="indicatorStyle1" :mask-style='maskStyle'>
						<picker-view-column>
							<view class="item" v-for="(item,index) in selectTime[0]" :key="index">{{item.label}}</view>
						</picker-view-column>
					</picker-view>
					<picker-view :value="tTimeValue" @change="tBindChange" :indicator-style="indicatorStyle"
						@pickstart='pickstart' @pickend='pickend' :mask-style='maskStyle' class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in selectTime[1]" :key="index">{{item.label}}点</view>
						</picker-view-column>
					</picker-view>
					<picker-view @pickstart='pickstart' @pickend='pickend' :value="mTimeValue" @change="mBindChange"
						:indicator-style="indicatorStyle2" :mask-style='maskStyle' class="picker-view"
						v-if="selectTime[1].length">
						<picker-view-column>
							<view class="item" v-for="(item,index) in selectTime[1][tTimeValue[0]].children"
								:key="index">{{item}}分</view>
						</picker-view-column>
					</picker-view>
				</view>
				<!-- 确认时间 -->
				<button @click="confim" :class="[this.showInDataTime[1] != null?'actice':'confim' ] ">确认时间</button>
			</view>
		</view>
	</view>
</template>
<script>
	// 工作小记 还剩下 收工时间 没有搞定计算，确认没有返回时间 
	// 已完成 开工时间的计算， 以及 时间计算 赋值 等 都已经搞定
	import vibration from './../libs/vibration.js'
	export default {
		data() {
			const nowDate = new Date();
			return {
				maxTimeSpan: 0, //时间跨度
				dateTime: [],
				showInDataTime: [],
				selectShow: false,
				selectShowInfo: false,
				selectTimeIndex: 0,
				dTimeValue: [0],
				tTimeValue: [0],
				mTimeValue: [0],
				nowDate,
				indicatorStyle: `height: 104rpx;background: #F1F1F9;opacity: 0.5;fontSize: 40rpx;`,
				indicatorStyle1: `height: 104rpx;background: #F1F1F9;opacity: 0.5;fontSize: 40rpx;borderRadius:12rpx  0 0  12rpx`,
				indicatorStyle2: `height: 104rpx;background: #F1F1F9;opacity: 0.5;fontSize: 40rpx;borderRadius:0 12rpx 12rpx 0`,
				maskStyle: 'background:none',
				boolNumber: 0,
				isBtn: false,
			}
		},
		mounted() {
			this.getReleHours()
		},
		computed: {
			selectTime() {
				// 获取年月日时分秒
				const timer = this.nowDate;
				const YY = timer.getFullYear()
				const MM = timer.getMonth() + 1
				const DD = timer.getDate()
				const HH = timer.getHours()
				const mm = timer.getMinutes()
				// console.log(YY, MM, DD, HH, mm)
				var d = [],
					t = [];
				// 开工时间 选择
				if (this.selectTimeIndex == 0) {
					d = [{
						label: "明天",
						index: 1
					}], t = [];
					// 判断 是否需要生成 今天明天
					if (HH == 23 && mm >= 20) {
						// 生成今天时间
						var hhstart = 0;
						var createHHFlag = 1 // 明天数据
						var i = 0;
						while (createHHFlag != 2) {
							t.push({
								label: hhstart < 10 ? '0' + hhstart : hhstart,
								tt: createHHFlag,
								children: []
							})
							if (i >= 1) {
								for (var i = 0; i < 6; i++) {
									t[t.length - 1].children = ['00', '10', "20", "30", "40", "50"]
								}
							}
							if (hhstart >= 23) {
								hhstart = 0
								createHHFlag++
							} else {
								hhstart++
							}
							i++;
						}
						if (mm <= 20) {
							t[0].children = ['00', '10', "20", "30", "40", "50"].slice(Math.ceil(mm / 10) + 3)
							t[1].children = ['00', '10', "20", "30", "40", "50"]
						} else if (mm > 20) {
							t[0].children = ['00', '10', "20", "30", "40", "50"].slice(Math.ceil(mm / 10) + 3 - 6);
							t[1].children = ['00', '10', "20", "30", "40", "50"]
						}
					} else {
						d.unshift({
							label: "今天",
							index: 0
						})
						// 生成今天时间
						var hhstart = HH;
						if (mm > 20) hhstart++
						var createHHFlag = 0 // 0 今天 1 明天
						var i = 0;
						while (createHHFlag != 2) {
							t.push({
								label: hhstart < 10 ? '0' + hhstart : hhstart,
								tt: createHHFlag,
								children: []
							})
							if (i >= 1) {
								for (var i = 0; i < 6; i++) {
									t[t.length - 1].children = ['00', '10', "20", "30", "40", "50"]
								}
							}
							if (hhstart >= 23) {
								hhstart = 0
								createHHFlag++
							} else {
								hhstart++
							}
							i++;
						}
						if (mm <= 20) {
							t[0].children = ['00', '10', "20", "30", "40", "50"].slice(Math.ceil(mm / 10) + 3)
						} else if (mm > 20) {
							t[0].children = ['00', '10', "20", "30", "40", "50"].slice(Math.ceil(mm / 10) + 3 - 6);
						}
					}
				} else {
					// 收工时间 选择
					const startTime = new Date(new Date(this.showInDataTime[0]).getTime() + 60 * 60 * 1000);
					const maxTime = new Date(`${YY}/${MM}/${DD} 00:00:00`).getTime() + 1000 + (3 * 24 * 60 * 60 * 1000);
					let currentTime = startTime.getTime()
					let i = 0;
					let ThreeDay = null;
					while (maxTime > currentTime) {
						const currentTimeDate = new Date(currentTime);
						const currentYY = currentTimeDate.getFullYear()
						const currentMM = currentTimeDate.getMonth() + 1
						const currentDD = currentTimeDate.getDate()
						const currentHH = currentTimeDate.getHours()
						const currentmm = currentTimeDate.getMinutes()
						var dayNum = (new Date(`${currentYY}/${currentMM}/${currentDD}`).getTime() - new Date(
							`${YY}/${MM}/${DD}`).getTime()) / (24 * 60 * 60 * 1000)
						// 判断  赋值 t 显示 今天 明天 后天
						if (dayNum != ThreeDay) {
							ThreeDay = dayNum
							switch (ThreeDay) {
								case 0:
									d.push({
										label: "今天",
										index: 0
									})
									break;
								case 1:
									d.push({
										label: "明天",
										index: 1
									})
									break;
								case 2:
									d.push({
										label: "后天",
										index: 2
									})
									break;
								default:
									break
							}
						}
						// 计算需要循环的次数
						if (i == 0) {
							// 获取 计算的下个小时
							let nextTime = 0
							if (currentHH == 23) {
								nextTime = new Date(`${currentYY}/${currentMM}/${currentDD} 00:00:00`).getTime() + 24 *
									60 * 60 * 1000
							} else {
								nextTime = new Date(`${currentYY}/${currentMM}/${currentDD} ${currentHH + 1}:00:00`)
									.getTime()
								console.log(nextTime, 8888, currentHH)
							}
							// 获取需要填充的次数
							const forNum = (nextTime - currentTime) / 1000 / 60 / 10
							t.push({
								label: currentHH < 10 ? '0' + currentHH : currentHH,
								tt: ThreeDay,
								children: ['00', '10', "20", "30", "40", "50"].slice(6 - parseInt(forNum))
							})
						} else {
							t.push({
								label: currentHH < 10 ? '0' + currentHH : currentHH,
								tt: ThreeDay,
								children: ['00', '10', "20", "30", "40", "50"]
							})
						}
						i++
						currentTime += 60 * 60 * 1000
					}
				}
				return [
					d,
					t
				]
			}
		},
		methods: {
			pickstart() {
				this.isBtn = true;
			},
			pickend() {
				this.isBtn = false
			},
			// 获取区间时间
			async getReleHours() {
				let res = await this.$fetch(this.$api.property_list_by_type_and_key, {
					type: 1,
					key: "task_release_hour",
				}, "POST");
				this.maxTimeSpan = Number(res.data)
			},
			// 处理待选择的颜色
			waitcolor() {
				return !this.showInDataTime[1] ? '#FC361D' : ''
			},
			showSmake(bool) {
				this.selectShow = bool
				if (bool) {
					this.showInDataTime = Array.from(this.dateTime)
					if (!this.showInDataTime[0]) {
						this.selectTimeIndex = 0
						this.dTimeValue = [0]
						this.tTimeValue = [0]
						this.mTimeValue = [0]
					}
					const timer = setTimeout(() => {
						clearTimeout(timer)
						this.selectShowInfo = bool
						if (!this.showInDataTime[0]) {
							this.timeCount()
						}
					}, 100)
				} else {
					this.selectShowInfo = bool
					this.showInDataTime = Array.from(this.dateTime)
					this.dateTime = this.showInDataTime
					const timer = setTimeout(() => {
						clearTimeout(timer)
						if (!this.showInDataTime[0]) {
							this.timeCount()
						}
					}, 300)
				}
			},
			selectChange(index) {
				if (this.isBtn) return
				if (index == 1 && !this.showInDataTime[0]) {
					uni.showToast({
						title: "请先选择开工时间",
						icon: 'none'
					})
					return
				}
				if (this.selectTimeIndex != index) {
					this.selectTimeIndex = index
					this.dTimeValue = [0]
					this.tTimeValue = [0]
					this.mTimeValue = [0]
					if (!this.showInDataTime[this.selectTimeIndex]) {
						this.timeCount()
					} else {
						if (new Date(this.showInDataTime[1]).getTime() < (new Date(this.showInDataTime[0]).getTime() +
								1000 * 60 * 60)) {
							this.timeCount()
							return
						}
						const timer = setTimeout(() => {
							clearTimeout(timer)
							this.showPickerViewSelct()
						}, 300)
					}
				}
			},
			// 回显显示选中
			showPickerViewSelct() {
				const timer = this.nowDate;
				const YY = timer.getFullYear()
				const MM = timer.getMonth() + 1
				const DD = timer.getDate()
				const HH = timer.getHours()
				const mm = timer.getMinutes()
				const currentTimeDate = new Date(this.showInDataTime[this.selectTimeIndex]);
				const currentYY = currentTimeDate.getFullYear()
				const currentMM = currentTimeDate.getMonth() + 1
				const currentDD = currentTimeDate.getDate()
				const currentHH = currentTimeDate.getHours()
				const currentmm = currentTimeDate.getMinutes()
				var dayNum = (new Date(`${currentYY}/${currentMM}/${currentDD}`).getTime() - new Date(`${YY}/${MM}/${DD}`)
					.getTime()) / (24 * 60 * 60 * 1000)
				const index = this.selectTime[0].findIndex(item => item.index == dayNum)
				this.dTimeValue = [index]
				const showHH = currentHH < 10 ? '0' + currentHH : currentHH;
				const tIndex = this.selectTime[1].findIndex(item => (item.tt == dayNum && item.label == showHH))
				// console.log(tIndex)
				this.tTimeValue = [tIndex]
				const mIndex = this.selectTime[1][tIndex]?.children.findIndex(item => parseInt(item) == currentmm)
				this.mTimeValue = [mIndex]
			},
			dBindChange(data) {
				try {
					vibration()
				} catch (e) {
					//TODO handle the exception
				}
				this.dTimeValue = data.detail.value
				const index = this.selectTime[1].findIndex(item => item.tt == this.selectTime[0][data.detail.value[0]]
					.index)
				this.tTimeValue = [index]
				this.mTimeValue = [0]
				this.timeCount()
			},
			tBindChange(data) {
				try {
					vibration()
				} catch (e) {
					//TODO handle the exception
				}
				this.tTimeValue = data.detail.value
				this.mTimeValue = [0]
				const index = this.selectTime[0].findIndex(item => item.index == this.selectTime[1][data.detail.value[0]]
					.tt)
				this.dTimeValue = [index]
				this.timeCount()
			},
			mBindChange(data) {
				try {
					vibration()
				} catch (e) {
					//TODO handle the exception
				}
				this.mTimeValue = data.detail.value
				this.timeCount()
			},
			// 收集时间
			timeCount() {
				const timer = this.nowDate;
				var YY = timer.getFullYear()
				var MM = timer.getMonth() + 1
				var DD = timer.getDate()
				let YYMMDD = `${YY}/${MM}/${DD} 00:00:00`
				const tt = this.selectTime[1][this.tTimeValue[0]].tt;
				var str = ''
				if (tt == 0) {
					str =
						`${YY}/${MM < 10 ? '0' + MM : MM}/${DD < 10 ? '0' + DD : DD} ${this.selectTime[1][this.tTimeValue[0]].label}:${this.selectTime[1][this.tTimeValue[0]].children[this.mTimeValue[0]]}`
				} else if (tt == 1) {
					const newTime = new Date((new Date(YYMMDD).getTime() + 24 * 60 * 60 * 1000))
					var YY = newTime.getFullYear()
					var MM = newTime.getMonth() + 1
					var DD = newTime.getDate()
					str =
						`${YY}/${MM < 10 ? '0' + MM : MM}/${DD < 10 ? '0' + DD : DD} ${this.selectTime[1][this.tTimeValue[0]].label}:${this.selectTime[1][this.tTimeValue[0]].children[this.mTimeValue[0]]}`
				} else {
					const newTime = new Date((new Date(YYMMDD).getTime() + 24 * 60 * 60 * 1000 * 2))
					var YY = newTime.getFullYear()
					var MM = newTime.getMonth() + 1
					var DD = newTime.getDate()
					str =
						`${YY}/${MM < 10 ? '0' + MM : MM}/${DD < 10 ? '0' + DD : DD} ${this.selectTime[1][this.tTimeValue[0]].label}:${this.selectTime[1][this.tTimeValue[0]].children[this.mTimeValue[0]]}`
				}
				this.showInDataTime[this.selectTimeIndex] = str
				const timeSpan = (new Date(this.showInDataTime[1]).getTime() - new Date(this.showInDataTime[0]).getTime());
				if ((!this.showInDataTime[1]) || timeSpan < 3600000) {
					setTimeout(() => {
						this.$set(this.showInDataTime, 1, new Date(str).getTime() + 60 * 60 * 1000 * 4)
					}, 300)
				}
			},
			confim() {
				if (this.isBtn) return
				// 判断 时间最大跨度不能超过 设定值
				const timeSpan = (new Date(this.showInDataTime[1]).getTime() - new Date(this.showInDataTime[0])
				.getTime()) / 1000 / 60 / 60
				if (timeSpan > this.maxTimeSpan) {
					uni.showToast({
						title: `时间跨度不能超过${this.maxTimeSpan}小时`,
						icon: 'none'
					})
				} else if (timeSpan < 1) {
					uni.showToast({
						title: `时间跨度不能小于1小时`,
						icon: 'none'
					})
				} else {
					let obj = new Date(this.showInDataTime[1])
					let currentYY = obj.getFullYear()
					let currentMM = obj.getMonth() + 1
					let currentDD = obj.getDate()
					let currentHH = obj.getHours()
					let currentmm = obj.getMinutes()
					let timerObj = `${currentYY}/${currentMM}/${currentDD} ${currentHH}:${currentmm}`
					let timeArryObj = {
						interval: timeSpan,
						timeArry: this.showInDataTime
					}
					timeArryObj.timeArry[1] = timerObj
					this.$emit("input", this.showInDataTime)
					this.$emit("getValue", timeArryObj)
					this.dateTime = this.showInDataTime
					this.showSmake(false)
				}
			},
			filterTimeShow(data) {
				if (!data) {
					return '待选择'
				}
				// 获取年月日时分秒
				var timer = this.nowDate;
				const YY = timer.getFullYear()
				const MM = timer.getMonth() + 1
				const DD = timer.getDate()
				const HH = timer.getHours()
				const mm = timer.getMinutes()
				// 选择的时分秒
				const selectTime = new Date(data);
				const sYY = selectTime.getFullYear()
				const sMM = selectTime.getMonth() + 1
				const sDD = selectTime.getDate()
				const sHH = selectTime.getHours()
				const smm = selectTime.getMinutes()
				// 判断显示 今天明天跟后天
				const newDay = new Date(`${YY}/${MM}/${DD} 00:00:00`).getTime()
				const sDay = new Date(`${sYY}/${sMM}/${sDD} 00:00:00`).getTime()
				const newDay1 = new Date(`${YY}/${MM}/${DD} 00:00:00`)
				const sDay1 = new Date(`${sYY}/${sMM}/${sDD} 00:00:00`)
				var dayLabel = '今天'
				console.log(sDay1, newDay1, "sDay - newDay")
				switch (sDay - newDay) {
					case 0:
						break;
					case 24 * 60 * 60 * 1000:
						dayLabel = "明天";
						break;
					case 24 * 60 * 60 * 1000 * 2:
						dayLabel = "后天";
						break;
					default:
						dayLabel = `${sYY}/${sMM < 10 ? '0' + sMM : sMM}/${sDD < 10 ? '0' + sDD : sDD}`
						break;
				}
				return `${dayLabel} ${sHH < 10 ? '0' + sHH : sHH}:${smm < 10 ? '0' + smm : smm}`
			}
		},
	}
</script>
<style lang="scss" scoped>
	.date-value {
		font-size: 28rpx;
		font-weight: 500;
		line-height: 45rpx;
		display: flex;
		align-items: center;
	}

	.smake {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .7);
		z-index: 899;

		.smake-Info {
			position: absolute;
			left: 0;
			bottom: -1000px;
			width: 100%;
			transition: all .3s;
			box-sizing: border-box;
			background-color: #fff;
			z-index: 2;
			border-radius: 24rpx 24rpx 0 0;
			padding: 50rpx 28rpx 28rpx;
			padding-bottom: calc(28rpx + safe-area-inset-bottom);
		}

		.smake-Info.active {
			bottom: 0px;
		}

		.top-Select-List {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				width: 264rpx;
				height: 180rpx;
				border-radius: 24rpx;
				border: 2rpx solid #979797;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				transition: all .3s;

				&.active {
					background-color: #FCC928;
				}
			}

			.label {
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
			}

			.value {
				margin-top: 10px;
				font-size: 36rpx;
				white-space: nowrap;
				font-weight: 600;
				color: #444445;
			}

			.next-Icon {
				height: 2px;
				background-color: #333;
				width: 40px;
				position: relative;

				&::before {
					content: "";
					position: absolute;
					right: 0;
					bottom: 2px;
					height: 2px;
					background-color: #333;
					transform: rotate(16deg);
					width: 10px;
				}
			}
		}
	}

	.picker-List {
		margin: 20px 0;
		height: 400rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.picker-view {
			width: 33.333333333%;
			height: 400rpx;
			line-height: 104rpx;
			font-size: 40rpx;
			text-align: center;

			.item {
				height: 104rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				color: #1A1A1A;
				font-size: 32rpx;
			}
		}
	}

	/deep/.indicator-Class {
		height: 104rpx;
		font-weight: bold;
		background: #F1F1F5;
	}

	// 提交按钮
	.confim {
		background: #A5A5A5;
		border-radius: 12rpx;
		margin-top: 24rpx;
		font-weight: 400;
		transition: all .3s;
		outline: none;
		border: none;
		color: #FFFFFF;
	}

	.actice {
		background: #FCC928;
		outline: none;
		margin-top: 24rpx;
		border-radius: 12rpx;
		border: none;
		font-size: 36rpx;
		box-shadow: 2rpx 12rpx 24rpx 2rpx rgba(252, 201, 40, 0.4);
	}

	.actice::after {
		content: '';
		border: none;
	}
</style>